<template>
	<view class="">
		<Loading class="loading" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<cu-custom bgColor="bg-gradual-red" :isBack="true" @jumpRight="jumpRight">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>

		<view class="head-box  bg-white" id="head">


			<view class="middle padding-sm">
				计划购买 <yp-number-box :min="1" :max="20" value="10" index="0"></yp-number-box> 元
			</view>

			<view class="bg-white tab">
				<view class="grid col-3   text-center tab-box  ">
					<view class="border padding-sm" v-for="(item,index) in tab" :key="index"
						:class="index==tabIndex?'bg-red':''" @click="changeType(index)">
						{{item.name}}
					</view>

				</view>
			</view>

			<view class="grid col-3   text-center  head-table padding-sm">
				<view class="">
					单注组合
				</view>

				<view class="">
					注数
				</view>
				<view class="">
					预测奖金
				</view>
			</view>
		</view>


		<scroll-view scroll-y="true" :style="{height:scrollH+'px'}" class="scroll-box ">
			<view class="grid col-3 bg-white  text-center flex align-center head-scroll ">
				<view class="border-gray-right padding-sm text-sm">
					单注组合sadasdasdad
					asdasda
				</view>

				<view class="">
					<yp-number-box :min="1" :max="20" value="10" index="0"></yp-number-box>
				</view>
				<view class="text-red border-gray-left border " style="height: 100%;">
					190.34元
				</view>
			</view>
			<view class="grid col-4   text-center   padding-sm">
				<view class="">
					投注场次
				</view>

				<view class="">
					主队
				</view>
				<view class="">
					客队
				</view>
				<view class="">
					投注内容
				</view>
			</view>

		</scroll-view>





		<view class="sub-box bg-white border-gray-top" id="buttom">

			<view class="flex sub-box1   justify-around">
				<view class="flex sub-box1-box  padding-sm margin-xs ">
					<view class="sub-box1-title">
						1注5倍共10元
					</view>
					<view class="text-sm sub-box1-title">
						顶计奖盘:6.1-611元
					</view>
				</view>
				<button class="cu-btn bg-red  xl">确定</button>
			</view>
		</view>

	</view>
</template>

<script>
	import ypNumberBox from "@/components/yp-number-box/yp-number-box1.vue";
	export default {
		components: {
			ypNumberBox
		},
		data() {
			return {
				title: "奖金优化",
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',
				tab: [{
						name: "平均优化",
						type: 0
					},
					{
						name: "博热优化",
						type: 1
					},
					{
						name: "博冷优化",
						type: 2
					}
				],
				tabIndex: 0,
				scrollH: 0,






			}
		},
		onLoad() {
			this.isLoading = true;

		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#buttom').boundingClientRect(data => {

				this.scrollH = this.WH - this.CustomBar - data.height;


			}).exec();
			query.select('#head').boundingClientRect(res => {

				this.scrollH -= res.height;

			}).exec();

		},
		methods: {
			changeType(index) {
				this.tabIndex = index;



			},




		}



	}
</script>

<style>
	.tab {
		padding-bottom: 15rpx;
	}

	.tab-box {
		width: 96%;
		margin: auto;

	}

	.bg-red {
		border: none;
	}

	.head-table {
		background-color: #F0F0F0;
	}
	.head-scroll view{
		height: 100%;
	}

	/**
	 * 底部样式
	 */
	.sub-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	.sub-box1 {
		padding: 10rpx;
		align-items: center;
	}

	.sub-box1-title {
		width: 100%;
	}

	.sub-box1-box {
		text-align: center;
		flex-direction: column;
	}

	.add-box {
		padding-bottom: 50rpx;

	}
	.border-gray-right {
	
		border-right: 1rpx solid #E1E1E1;
	}
	.border-gray-left {
		height: 100%;
		border-left: 1rpx solid #E1E1E1;
	}
</style>
